<template>
  <div>
    <!-- 头部导航结构 -->
    <van-nav-bar
      title="精彩跟帖"
      left-arrow
      @click-left="$router.back()"
      @click-right="$router.push({ path: '/' })"
    >
    </van-nav-bar>
    <!-- 2.0 评论主体 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        class="list"
      >
        <div class="item" v-for="item in commentList" :key="item.id">
          <div class="head">
            <img :src="item.user.head_img | imgUrl" alt />
            <div>
              <p>{{ item.user.nickname }}</p>
              <span>2021-6-10</span>
            </div>
            <span @click="reply(item)" class="reply">回复</span>
          </div>
          <!-- 父评论 -->
          <MyContent
            v-if="item.parent"
            :comment="item.parent"
            @parentReply="reply"
          ></MyContent>
          <div class="text">{{ item.content }}</div>
        </div>
        <!-- 没有数据时显示 -->
        <van-empty v-if="commentList.length === 0" description="空空如野" />
      </van-list>
    </van-pull-refresh>
    <!-- 3.0 评论底部 -->
    <MyComment
      :article="post"
      @update="updateFn"
      ref="MyComment"
      :commentObj="temp"
      @reset="temp = null"
    ></MyComment>
  </div>
</template>

<script>
import { getPostCommentByIdAPI, getPostDetailByIdAPI } from "../apis/news";
import MyComment from "../components/MyComment.vue";
import MyContent from "../components/MyContent.vue";
export default {
  data() {
    return {
      id: this.$route.params.id,
      post: {},
      commentList: [],
      // 1. temp 为 null 表示回复的是文章，2. 传入评论对象表示回复某个人
      temp: null,
      pageIndex: 1,
      pagesize: 5,
      finished: false,
      loading: false,
      refreshing: false,
    };
  },
  components: {
    MyComment,
    MyContent,
  },
  async created() {
    // 根据文章 id 获取文章评论列表
    this.getCommentData();
    // 根据id 获取文章数据
    const res = await getPostDetailByIdAPI(this.id);
    this.post = res.data.data;
  },
  methods: {
    // 下拉刷新时触发的函数
    async onRefresh() {
      console.log("下拉刷新动画效果");
      // 页码重置
      this.pageIndex = 1;
      // 重置数组
      this.commentList = [];
      // 隐藏没有更多了的提示 - 可以继续分页加载
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      await this.getCommentData();
      this.refreshing = false;
    },
    // 即将触底时触发
    onLoad() {
      this.pageIndex++;
      console.log(this.pageIndex);
      this.getCommentData();
    },
    async getCommentData() {
      // 获取文章 id，
      // console.log(this.id);
      // 根据文章 id 获取文章评论列表
      const res = await getPostCommentByIdAPI(this.id, {
        pageIndex: this.pageIndex,
        pagesize: this.pagesize,
      });
      // console.log(res2);
      // 没有更多数据，就要结束
      if (res.data.data.length === 0) {
        this.finished = true;
        return;
      }
      // 分页是追加数据到原数组中
      this.commentList.push(...res.data.data);
      // 隐藏加载中的提示
      this.loading = false;
    },
    updateFn() {
      // 💥 因为有分页，重置所有数据
      this.onRefresh();
      // console.log("父组件上的 commentList 评论列表需要重新获取");
      // 小马滚动
      // document.documentElement.scrollTop = 0;
      // 平滑滚动 - 手机端可用
      window.scrollTo({ top: 0, behavior: "smooth" });
      // 发布成功后清空回复的id
      this.temp = null;
    },
    // 回复评论
    reply(item) {
      console.log("回复", item);
      // 🔔 通过 ref 找到组件实例，调用组件内的方法实现展示文本域
      this.$refs.MyComment.inputFn();
      // 把当前评论对象传递给底部评论组件内
      this.temp = item;
    },
  },
};
</script>

<style lang="less" scoped>
.item {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    > img {
      width: 50/360 * 100vw;
      height: 50/360 * 100vw;
      display: block;
      border-radius: 50%;
    }
    > div {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-left: 10px;
      > span {
        font-size: 12px;
        color: #999;
        line-height: 25px;
      }
    }
    > span {
      color: #999;
      font-size: 13px;
    }
    .reply {
      z-index: 11;
      color: #f00;
    }
  }
  .text {
    font-size: 14px;
    color: #333;
    padding: 20px 0 10px 0;
  }
}
</style>